<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
</head>
<body>
<style>
    .el-table .warning-row {
        background: #f9c855;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<div id="app">
    <el-row class="el-search-row-d" style="margin-right: auto">
<!--        <el-input-->
<!--                placeholder="名称模糊查询"-->
<!--                v-model="sffName"-->
<!--                style="width: fit-content"-->
<!--                @change="init"-->
<!--                clearable>-->
<!--        </el-input>-->
<!--        <el-button size="small" type="primary" @click="init">检索</el-button>-->
        <el-button type="primary"  @click="dialogFormVisible = true">新增</el-button>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="添加修正" :visible.sync="dialogFormVisible" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="挂号类型" prop="binName">
                <el-input v-model="ruleForm.binName" type="text" placeholder="请输入挂号类型" maxlength="20"
                          show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="挂号类型类型" prop="binType">
                <el-select v-model="ruleForm.binType" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="金额" prop="fee">
                <el-input v-model="ruleForm.fee" type="number" placeholder="请输入金额" maxlength="4"
                          show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="拼音码" prop="chinaSpell">
                <el-input v-model="ruleForm.chinaSpell"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @current-change="handleCurrentChange"
                max-height="800">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="binName"
                    label="挂号类型名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="binType"
                    label="挂号类型"
                    :formatter="formatterPatMemGrade"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="fee"
                    label="挂号金额(元)"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="chinaSpell"
                    label="拼音码"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index,scope.row)"
                            type="text"
                            size="small">
                        <p v-if="scope.row.status=='0' || scope.row.status==0 ">
                            注销
                        </p>
                        <p v-else>
                            还原
                        </p>
                    </el-button>
                    <el-button
                            @click.native.prevent="editRow(scope.$index,scope.row)"
                            type="text"
                            size="small">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                sffName: "",
                status: 0,
                loading: false,
                currentUpRow: null,
                options: [{
                    value: 0,
                    label: '普通'
                }, {
                    value: 1,
                    label: '专家'
                }, {
                    value: 2,
                    label: '特需'
                }],
                ruleForm: {
                    binCode: "",
                    binName: "",
                    binType: 2,
                    chinaSpell: "",
                    fiveStroke: "",
                    hospitalId: 330003,
                    id: null,
                    fee: null,
                    status: "0"
                },
                rules: {
                    binName: [
                        { required: true, message: '请输入挂号类型名称', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],fee: [
                        { required: true, message: '请输入金额', trigger: 'blur' },
                        { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        methods: {
            init: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let that = this
                that.loading=false
                axios.post("http://"+window.location.host+'/pubBindInfo/select_list', {
                }).then(res => {
                    that.tableData = res.data.data;
                    loading.close()
                }).catch((e) => {
                    alert('获取数据失败');
                    loading.close()
                });
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
                console.log(this.currentUpRow)
            },
            formatterPatMemGrade:function(row, column){
                if (row.binType == 1 || row.binType== '1'){
                    return "专家"
                }else if (row.binType == 0 || row.binType=='0'){
                    return "普通"
                }else{
                    return "特需"
                }
            },
            submitForm: function(ruleForm){
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        axios.post("http://"+window.location.host+'/pubBindInfo/create', this.ruleForm).then(res => {
                            alert("创建成功!");
                            this.ruleForm =  {
                                binCode: "",
                                binName: "",
                                binType: 2,
                                chinaSpell: "",
                                fiveStroke: "",
                                hospitalId: null,
                                id: null,
                                status: "0"
                            }
                            this.dialogFormVisible = false
                            this.init()
                        }).catch(function (error) {
                            alert(error.response.data.message)

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteRow: function(index, row) {
                let status = row.status=='0'?'1':'0'
                axios.post("http://"+window.location.host+'/pubBindInfo/update_by_primary_key_selective',
                    {'id':row.id,'status':status}
                ).then(res => {
                    alert("操作成功！");
                    this.init()

                })
            },
            editRow:function(index, row) {
                this.ruleForm=row;
                console.log(this.ruleForm)
                this.dialogFormVisible = true
            },
            tableRowClassName({row, rowIndex}) {
                if (row.status == 1 || row.status == '1') {
                    return 'warning-row';
                } else if (row.status == 0 || row.status == '0') {
                    return 'success-row';
                }
                return '';
            },
        },
        created() {
            this.init()
        },
        mounted() {
        }
    });
</script>

</html>
